/* components/routelist/index.wxss */

.routelist {
  overflow: hidden;
  padding: 20rpx 30rpx;
  display: flex;
  flex-direction: column;

  .one {
    height: 400rpx;
    border-radius: 16rpx;
    overflow: hidden;
    position: relative;
    margin: 20rpx 0;

    &>image {
      width: 100%;
      height: 100%;
    }

    .collect {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background-color: rgba($color: #f8f8f8, $alpha: 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 20rpx;
      right: 20rpx;

      image {
        width: 32rpx;
        height: 30rpx;
      }
    }

    .info {
      width: 560rpx;
      box-sizing: border-box;
      padding: 10rpx 28rpx;
      background-color: rgba($color: #fff, $alpha: 0.7);
      border-radius: 0 8rpx 8rpx 0;
      position: absolute;
      left: 0;
      bottom: 40rpx;

      .tit {
        font-size: 28rpx;
        color: #203152;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .data {
        font-size: 22rpx;
        padding: 20rpx 0;
        display: flex;
        align-items: center;

        text {
          color: #666;
          margin-left: 40rpx;

          &:first-child {
            margin: 0;
          }
        }
      }

      .village {
        overflow: hidden;
        overflow-x: auto;
        white-space: nowrap;

        view {
          display: inline-block;
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          text-align: center;
          color: #fff;
          position: relative;
          overflow: hidden;
          margin-left: -20rpx;

          &:first-child {
            margin: 0;
          }

          image {
            width: 100%;
            height: 100%;
          }

          text {
            font-size: 20rpx;
            line-height: 1;
            width: 100%;

            position: absolute;
            left: 0;
            bottom: 20rpx;
          }

          &.more {
            background-color: #46469E;
            line-height: 80rpx;
          }

          &.total {
            width: auto;
            border-radius: 0;
            line-height: 80rpx;
            font-size: 24rpx;
            float: right;
          }
        }

        &.show {
          view {
            margin-left: 20rpx;

            &:first-child {
              margin: 0;
            }

            &.total,
            &.more {
              display: none;
            }
          }
        }


      }
    }
  }

}